Курс по Gulp. Основы 2017
Данный курс предназначен для тех, кто уже знаком с основами JavaScript, а также с основами платформы NodeJS, так как именно на ней мы и будем реализовывать функционал данного мини-курса.
Все моменты будут разобраны на практике - в процессе курса мы напишем множество задач, которые будут выполняться на gulp.
А финальным решением у нас будет полная автоматическая сборка препроцессора less в css со множеством этапов: автоматические префиксы, минификация, объединение в один файл, исходные карты и сервер автоматического применения стилей без перезагрузки страницы.


Урок 1. Gulp. Что такое Gulp и его установка:
От автора: в этом уроке мы начнем разбирать один из самых быстрых таск-ранеров на рынке — gulp. Мы узнаем как его установить и запустить первую задачу.
Из урока вы узнаете что такое Gulp, как его установить с помощью пакетного менеджера NPM.
В результате данного урока мы установим Gulp как локально, так и глобально, узнаем зачем делать 2 разные установки. Также мы создадим первую тестовую задачу и разберем как это работает.


Урок 2. Gulp. Работа с файлами:
От автора: в этом уроке мы узнаем методы и особенности работы с файлами с помощью gulp.
Из урока вы познакомитесь с тремя встроенными методами в Gulp, которые в основном нужны для работы с файлами: src, dest и pipe.
В результате данного урока мы напишем скрипт на Gulp для работы с файлами и познакомимся с особенностями работы данного инструмента с файлами.


Урок 3. Gulp. Подключение плагинов. Сборка less-файлов:
От автора: в этом уроке мы разберем каким образом можно подключать различные gulp-плагины на примере компиляции препроцессора less.
Из урока вы узнаете как подключать сторонние плагины к сборщику Gulp, в которых и заключается основной его функционал.
В результате данного урока мы сделаем полноценную сборку less файлов с помощью нескольких Gulp плагинов — добавим карту для парсинга less файлов, добавим автоматические префиксы для разных браузеров и соединим все файлы в один.


Урок 4. Gulp. Gulp debug и работа с плагинами:
От автора: в этом уроке мы разберем еще один полезный плагин для сборщика gulp — gulp-debug.
Из урока вы узнаете как установить плагин для отладки скриптов на gulp — gulp-debug. Также вы узнаете про еще один плагин для отладки — gulp-if с помощью которого можно по определенным условиям добавлять или убирать пайпы из задачи.
В результате данного урока мы дополним скрипт для сборки Less файлов продакшн сборкой. Если это будет режим разработки, то не будет минификации и будут видны исходные карты, а если это будет режим продакшена, то все максимально сожмется для увеличения производительности.


Урок 5. Gulp. Gulp watch:
От автора: в этом уроке мы разберем одну из самых важных возможностей gulp — слежение за изменением файлов.
Из урока вы узнаете про еще одну важную возможность gulp — gulp watch. Данная функция позволяет в автоматическом режиме следить за изменением любых файлов и выполнять определенные действия.
В результате данного урока мы расширим скрипт по сборке less файлов с помощью gulp watch и сделаем сборку автоматической при любом изменении стилей.


Урок 6. Gulp. Подключение browser sync:
От автора: в этом уроке будет рассказано каким образом сделать разработку максимально комфортной с помощью плагина browser-sync.
Из урока вы узнаете как установить и настроить плагин для максимально удобной разработки — browser-sync. С помощью данного плагина \ сервера мы сможем настроить свой локальный сервер для изменения содержимого страницы браузера без перезагрузки страницы и в автоматическом режиме.
В результате данного урока будет полностью завершен gulp скрипт для работы со стилями. C помощью плагина browser-sync мы сделаем возможность автоматической “горячей перезагрузке” окна браузера, которая позволит разрабатывать в разы быстрее.